<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/core.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script type="text/javascript" src="assets/js/plugins/ui/prism.min.js"></script>
	
	<script type="text/javascript" src="assets/js/core/app.js"></script>
	<script type="text/javascript" src="assets/js/pages/sidebar_detached_sticky_native.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-detached" class="has-detached-right">

	<!-- Main navbar -->
	<div class="navbar navbar-default navbar-lg header-highlight">
		<div class="navbar-header">
			<a class="navbar-brand" href="index.html"><img src="assets/images/logo_light.png" alt=""></a>

			<ul class="nav navbar-nav pull-right visible-xs-block">
				<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
				<li><a class="sidebar-mobile-main-toggle"><i class="icon-paragraph-justify3"></i></a></li>
				<li><a class="sidebar-mobile-detached-toggle"><i class="icon-grid7"></i></a></li>
			</ul>
		</div>

		<div class="navbar-collapse collapse" id="navbar-mobile">
			<ul class="nav navbar-nav">
				<li><a class="sidebar-control sidebar-main-hide hidden-xs"><i class="icon-paragraph-justify3"></i></a></li>
				<li><a class="sidebar-control sidebar-detached-hide hidden-xs"><i class="icon-drag-right"></i></a></li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li><a href="other_changelog.html#roadmap.html">Roadmap</a></li>
				<li><a href="other_changelog.html">Changelog <span class="label label-inline bg-warning-400 position-right">v. 0.0</span></a></li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				<div class="sidebar-content">

	        		<!-- Support -->
					<div class="sidebar-category no-margin">
						<div class="category-title">
							<span>Have questions?</span>
							<i class="icon-help text-muted pull-right"></i>
						</div>

						<div class="category-content">
							<a href="http://themeforest.net/user/kopyov" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy position-left"></i> Limitless support</a>
						</div>
					</div>
					<!-- /support -->


					<!-- Main navigation -->
					<div class="sidebar-category">
						<div class="category-title">
							<span>Navigation</span>
							<i class="icon-menu7 text-muted pull-right"></i>
						</div>

						<div class="category-content no-padding">
							<ul class="navigation navigation-main navigation-accordion">

								<!-- Main -->
								<li class="navigation-header">Main</li>
								<li><a href="index.html">Introduction</a></li>
								<li><a href="main_getting_started.html">Getting started</a></li>
								<li><a href="main_starter_kit.html">Starter kit</a></li>

								<li class="navigation-header">Basic functionality</li>								
								<li><a href="base_less_css.html">LESS and CSS</a></li>
								<li>
									<a href="#">Plugins</a>
									<ul>
										<li><a href="plugins_forms.html">Forms</a></li>
										<li><a href="plugins_forms_styling.html">Form styling</a></li>
										<li><a href="plugins_selects.html">Selects</a></li>
										<li><a href="plugins_editors.html">Editors</a></li>
										<li><a href="plugins_uploaders.html">Uploaders</a></li>
										<li class="active"><a href="plugins_wizards.html">Wizards</a></li>
										<li><a href="plugins_extensions.html">Extensions</a></li>
										<li><a href="plugins_notifications.html">Notifications</a></li>
										<li><a href="plugins_pickers.html">Pickers</a></li>
										<li><a href="plugins_tables.html">Tables</a></li>
										<li><a href="plugins_ui.html">UI</a></li>
										<li><a href="plugins_vis.html">Visualization</a></li>
									</ul>
								</li>
								<li><a href="base_bootstrap.html">Bootstrap</a></li>
								<li><a href="base_color_system.html">Color system</a></li>
								<li><a href="base_helpers.html">Helpers</a></li>

								<li class="navigation-header">Layout options</li>
								<li><a href="layout_markup.html">Markup</a></li>
								<li><a href="layout_sidebars.html">Sidebars</a></li>
								<li><a href="layout_navbars.html">Navbars</a></li>
								<li><a href="layout_v_nav.html">Vertical navigation</a></li>
								<li><a href="layout_h_nav.html">Horizontal navigation</a></li>
								<li><a href="layout_page_header.html">Page header</a></li>
								<li><a href="layout_footer.html">Footer</a></li>

								<li class="navigation-header">Other</li>
								<li><a href="other_credits.html">Sources and credits</a></li>
								<li><a href="other_changelog.html">Changelog <span class="label bg-warning-400">Version 0.0</span></a></li>
								<!-- /main -->

							</ul>
						</div>
					</div>
					<!-- /main navigation -->

				</div>
			</div>
			<!-- /main sidebar -->


			<!-- Main content -->
			<div class="content-wrapper">

				<!-- Page header -->
				<div class="page-header">
					<div class="page-header-content">
						<div class="page-title">
							<h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">Limitless</span> - Wizards</h4>
						</div>

						<div class="heading-elements">
							<ul class="breadcrumb">
								<li><a href="index.html"><i class="icon-home2 position-left"></i> Home</a></li>
								<li><a href="plugins_wizards.html">Plugins</a></li>
								<li class="active">Wizards</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- /page header -->
				

				<!-- Content area -->
				<div class="content">

					<!-- Detached content -->
					<div class="container-detached">
						<div class="content-detached">

							<!-- Stepy wizard -->
							<div class="panel panel-flat" id="stepy">
								<div class="panel-heading">
									<h5 class="panel-title">Stepy wizard</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Wizards</span>
										<span class="heading-text text-muted">stepy.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>jQuery Stepy is a plugin based on FormToWizard that generates a customizable wizard. Supports multiple configuration options such as transitions, clickable titles, controlled text labels, multiple callbacks etc. To change the settings globally, change any option mentioning the scope <code>$.fn.stepy.defaults.</code> <strong>+ option_name</strong>. It must be called before you bind the plugin.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/forms/wizards/stepy.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Create a form with multiple fieldsets:</p>
											<pre><code class="language-markup">&lt;!-- Create form -->
&lt;form class="stepy-basic" action="#">
	&lt;fieldset title="Step 1">
		&lt;legend class="text-semibold">Step 1&lt;/legend>
		...
	&lt;/fieldset>

	&lt;fieldset title="Step 2">
		&lt;legend class="text-semibold">Step 2&lt;/legend>
		...
	&lt;/fieldset>
&lt;/form>
</code></pre>
										</div>

										<div class="content-group">
											<p>Finally call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic initialization
$(".stepy-basic").stepy({
	// options
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 200px;">Name</th>
														<th style="width: 200px;">Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>back</code></td>
														<td class="text-semibold">undefined</td>
														<td>Callback before the backward action</td>
													</tr>
													<tr>
														<td><code>backLabel</code></td>
														<td class="text-semibold">'&lt; Back'</td>
														<td>Change the back button label</td>
													</tr>
													<tr>
														<td><code>block</code></td>
														<td class="text-semibold">false</td>
														<td>Block the next step if the current is invalid</td>
													</tr>
													<tr>
														<td><code>description</code></td>
														<td class="text-semibold">false</td>
														<td>Choose if the descriptions of the titles will be showed</td>
													</tr>
													<tr>
														<td><code>duration</code></td>
														<td class="text-semibold">0</td>
														<td>Duration of the transition between steps in ms</td>
													</tr>
													<tr>
														<td><code>enter</code></td>
														<td class="text-semibold">true</td>
														<td>Enables the enter key to change to the next step</td>
													</tr>
													<tr>
														<td><code>errorImage</code></td>
														<td class="text-semibold">false</td>
														<td>If an error occurs, a image is showed in the title of the corresponding step</td>
													</tr>
													<tr>
														<td><code>finish</code></td>
														<td class="text-semibold">undefined</td>
														<td>Callback before the finish action</td>
													</tr>
													<tr>
														<td><code>finishButton</code></td>
														<td class="text-semibold">true</td>
														<td>Include the button with class called <code>'.finish'</code> into the last step</td>
													</tr>
													<tr>
														<td><code>ignore</code></td>
														<td class="text-semibold">''</td>
														<td>Choose the fields to be ignored on validation</td>
													</tr>
													<tr>
														<td><code>legend</code></td>
														<td class="text-semibold">false</td>
														<td>Choose if the legends of the steps will be showed</td>
													</tr>
													<tr>
														<td><code>next</code></td>
														<td class="text-semibold">undefined</td>
														<td>Callback before the forward action</td>
													</tr>
													<tr>
														<td><code>nextLabel</code></td>
														<td class="text-semibold">'Next &rt;'</td>
														<td>Change the next button label</td>
													</tr>
													<tr>
														<td><code>select</code></td>
														<td class="text-semibold">undefined</td>
														<td>Callback executed when the step is shown</td>
													</tr>
													<tr>
														<td><code>titleClick</code></td>
														<td class="text-semibold">true</td>
														<td>Active the back and next action in the titles</td>
													</tr>
													<tr>
														<td><code>titleTarget</code></td>
														<td class="text-semibold">undefined</td>
														<td>Choose the place where titles will be placed</td>
													</tr>
													<tr>
														<td><code>transition</code></td>
														<td class="text-semibold">'hide'</td>
														<td>Use transition between steps (<code>'hide'</code>, <code>'fade'</code> or <code>'slide'</code>)</td>
													</tr>
													<tr>
														<td><code>validate</code></td>
														<td class="text-semibold">false</td>
														<td>Active the jQuery Validation for each step</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin methods</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Method</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>.stepy('step', 2);</code></td>
														<td>Changes the form to the second step</td>
													</tr>
													<tr>
														<td><code>.stepy('destroy');</code></td>
														<td>Destroy the Stepy's bind and gives you the raw element</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>stepy.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/forms/wizards/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://wbotelhos.com/stepy" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<a href="https://github.com/wbotelhos/stepy" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /stepy wizard -->


							<!-- Steps wizard -->
							<div class="panel panel-flat" id="steps">
								<div class="panel-heading">
									<h5 class="panel-title">Steps wizard</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Wizards</span>
										<span class="heading-text text-muted">steps.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/forms/wizards/steps.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Create a form with multiple fieldsets:</p>
											<pre><code class="language-markup">&lt;!-- Create form -->
&lt;form class="steps-basic" action="#">
	&lt;h6>Step 1 header&lt;/h6>
	&lt;fieldset>
		&lt;legend class="text-semibold">Step 1&lt;/legend>
		...
	&lt;/fieldset>

	&lt;fieldset>
		&lt;legend class="text-semibold">Step 2&lt;/legend>
		...
	&lt;/fieldset>
&lt;/form>
</code></pre>
										</div>

										<div class="content-group">
											<p>Finally call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic initialization
$(".steps-basic").steps({
    headerTag: "h6",
    bodyTag: "fieldset",
    transitionEffect: "fade",
    titleTemplate: '&lt;span class="number">#index#&lt;/span> #title#',
    labels: {
        finish: 'Submit'
    },
    onFinished: function (event, currentIndex) {
        alert("Form submitted.");
    }
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th>Option</th>
														<th>Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<th colspan="3" class="active">Appearance</th>
													</tr>
													<tr>
														<td><code>headerTag</code></td>
														<td class="text-semibold">h1</td>
														<td>The header tag is used to find the step button text within the declared wizard area.</td>
													</tr>
													<tr>
														<td><code>bodyTag</code></td>
														<td class="text-semibold">div</td>
														<td>The body tag is used to find the step content within the declared wizard area.</td>
													</tr>
													<tr>
														<td><code>contentContainerTag</code></td>
														<td class="text-semibold">div</td>
														<td>The content container tag which will be used to wrap all step contents.</td>
													</tr>
													<tr>
														<td><code>actionContainerTag</code></td>
														<td class="text-semibold">div</td>
														<td>The action container tag which will be used to wrap the pagination navigation.</td>
													</tr>
													<tr>
														<td><code>stepsContainerTag</code></td>
														<td class="text-semibold">div</td>
														<td>The steps container tag which will be used to wrap the steps navigation.</td>
													</tr>
													<tr>
														<td><code>cssClass</code></td>
														<td class="text-semibold">wizard</td>
														<td>The css class which will be added to the outer component wrapper.</td>
													</tr>
													<tr>
														<td><code>stepsOrientation</code></td>
														<td class="text-semibold">horizontal</code> or <code>0</td>
														<td>Determines whether the steps are vertically or horizontally oriented.</td>
													</tr>

													<tr>
														<th colspan="3" class="active">Behaviour</th>
													</tr>
													<tr>
														<td><code>titleTemplate</code></td>
														<td class="text-semibold">&lt;span class="number">#index#.&lt;/span> #title#</td>
														<td>The title template which will be used to create a step button</td>
													</tr>
													<tr>
														<td><code>loadingTemplate</code></td>
														<td class="text-semibold">&lt;span class="spinner">&lt;/span> #text#</td>
														<td>The loading template which will be used to create the loading animation</td>
													</tr>

													<tr>
														<th colspan="3" class="active">Templates</th>
													</tr>
													<tr>
														<td><code>autoFocus</code></td>
														<td class="text-semibold">false</td>
														<td>Sets the focus to the first wizard instance in order to enable the key navigation from the begining if <code>true</code></td>
													</tr>
													<tr>
														<td><code>enableAllSteps</code></td>
														<td class="text-semibold">false</td>
														<td>Enables all steps from the begining if <code>true</code> (all steps are clickable).</td>
													</tr>
													<tr>
														<td><code>enableKeyNavigation</code></td>
														<td class="text-semibold">true</td>
														<td>Enables keyboard navigation if <code>true</code> (arrow left and arrow right)</td>
													</tr>
													<tr>
														<td><code>enablePagination</code></td>
														<td class="text-semibold">true</td>
														<td>Enables pagination (next, previous and finish button) if <code>true</code></td>
													</tr>
													<tr>
														<td><code>suppressPaginationOnFocus</code></td>
														<td class="text-semibold">true</td>
														<td>Suppresses pagination if a form field is focused</td>
													</tr>
													<tr>
														<td><code>enableContentCache</code></td>
														<td class="text-semibold">true</td>
														<td>Enables cache for async loaded or iframe embedded content</td>
													</tr>
													<tr>
														<td><code>enableCancelButton</code></td>
														<td class="text-semibold">false</td>
														<td>Shows the cancel button if enabled</td>
													</tr>
													<tr>
														<td><code>enableFinishButton</code></td>
														<td class="text-semibold">true</td>
														<td>Shows the finish button if enabled</td>
													</tr>
													<tr>
														<td><code>showFinishButtonAlways</code></td>
														<td class="text-semibold">false</td>
														<td>Shows the finish button always (on each step; right beside the next button) if <code>true</code>. Otherwise the next button will be replaced by the finish button if the last step becomes active</td>
													</tr>
													<tr>
														<td><code>forceMoveForward</code></td>
														<td class="text-semibold">false</td>
														<td>Prevents jumping to a previous step</td>
													</tr>
													<tr>
														<td><code>saveState</code></td>
														<td class="text-semibold">false</td>
														<td>Saves the current state (step position) to a cookie. By coming next time the last active step becomes activated</td>
													</tr>
													<tr>
														<td><code>startIndex</code></td>
														<td class="text-semibold">0</td>
														<td>The position to start on (zero-based)</td>
													</tr>

													<tr>
														<th colspan="3" class="active">Transition Effects</th>
													</tr>
													<tr>
														<td><code>transitionEffect</code></td>
														<td class="text-semibold">none or 0</td>
														<td>The animation effect which will be used for step transitions</td>
													</tr>
													<tr>
														<td><code>transitionEffectSpeed</code></td>
														<td class="text-semibold">200</td>
														<td>Animation speed for step transitions (in milliseconds)</td>
													</tr>

													<tr>
														<th colspan="3" class="active">Labels</th>
													</tr>
													<tr>
														<td><code>cancel</code></td>
														<td class="text-semibold">'Cancel'</td>
														<td>Label for the cancel button</td>
													</tr>
													<tr>
														<td><code>current</code></td>
														<td class="text-semibold">'Current step:'</td>
														<td>This label is important for accessability reasons. Indicates which step is activated</td>
													</tr>
													<tr>
														<td><code>pagination</code></td>
														<td class="text-semibold">'Pagination'</td>
														<td>This label is important for accessability reasons and describes the kind of navigation</td>
													</tr>
													<tr>
														<td><code>finish</code></td>
														<td class="text-semibold">'Finish'</td>
														<td>Label for the finish button</td>
													</tr>
													<tr>
														<td><code>next</code></td>
														<td class="text-semibold">'Next'</td>
														<td>Label for the next button</td>
													</tr>
													<tr>
														<td><code>previous</code></td>
														<td class="text-semibold">'Previous'</td>
														<td>Label for the previous button</td>
													</tr>
													<tr>
														<td><code>loading</code></td>
														<td class="text-semibold">'Loading ...'</td>
														<td>Label for the loading animation</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin events</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Event</th>
														<th style="width: 250px;">Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>onStepChanging</code></td>
														<td class="text-semibold">function (event, currentIndex, newIndex) { return true; }</td>
														<td>Fires before the step changes and can be used to prevent step changing by returning <code>false</code>. Very useful for form validation</td>
													</tr>
													<tr>
														<td><code>onStepChanged</code></td>
														<td class="text-semibold">function (event, currentIndex, priorIndex) { }</td>
														<td>Fires after the step has change</td>
													</tr>
													<tr>
														<td><code>onCanceled</code></td>
														<td class="text-semibold">function (event) { }</td>
														<td>Fires after cancelation</td>
													</tr>
													<tr>
														<td><code>onFinishing</code></td>
														<td class="text-semibold">function (event, currentIndex) { return true; }</td>
														<td>Fires before finishing and can be used to prevent completion by returning <code>false</code>. Very useful for form validation</td>
													</tr>
													<tr>
														<td><code>onFinished</code></td>
														<td class="text-semibold">function (event, currentIndex) { }</td>
														<td>Fires after completion</td>
													</tr>
													<tr>
														<td><code>onInit</code></td>
														<td class="text-semibold">function (event, currentIndex) { }</td>
														<td>Fires when the wizard is initialized</td>
													</tr>
													<tr>
														<td><code>onContentLoaded</code></td>
														<td class="text-semibold">function (event, currentIndex) { }</td>
														<td>Fires after async content is loaded</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>steps.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/forms/wizards/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://www.jquery-steps.com/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="https://github.com/rstaib/jquery-steps/wiki" class="btn btn-sm bg-slate btn-labeled" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<a href="https://github.com/rstaib/jquery-steps" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /steps wizard -->


							<!-- Form wizard -->
							<div class="panel panel-flat" id="form">
								<div class="panel-heading">
									<h5 class="panel-title">Form wizard</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Wizards</span>
										<span class="heading-text text-muted">/wizards/form/</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>jQuery plugin based on top of jQuery UI which turns a form into a multistep wizard. Integrates with the jQuery form plugin for AJAX submission of the form, the validation plugin for client side validation and the BBQ plugin for enabling the browsers back and forward buttons.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/forms/wizards/form/form_wizard.min.js">&lt;/script>

&lt;!-- Load extension -->
&lt;script type="text/javascript" src="assets/js/plugins/forms/wizards/form/form.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Create a form with multiple fieldsets:</p>
											<pre><code class="language-markup">&lt;!-- Create form -->
&lt;form class="form-wizard" action="#">
	&lt;fieldset class="step" id="step1">
		&lt;h6 class="form-wizard-title text-semibold">
			&lt;span class="form-wizard-count">1&lt;/span>
			Step 1 title
			&lt;small class="display-block">Subtitle&lt;/small>
		&lt;/h6>
		...
	&lt;/fieldset>

	&lt;fieldset>
		&lt;h6 class="form-wizard-title text-semibold">
			&lt;span class="form-wizard-count">2&lt;/span>
			Step 2 title
			&lt;small class="display-block">Subtitle&lt;/small>
		&lt;/h6>
		...
	&lt;/fieldset>
&lt;/form>
</code></pre>
										</div>

										<div class="content-group">
											<p>Finally call the plugin via JavaScript:</p>
											<pre><code class="language-javascript">// Basic initialization
$(".form-wizard").formwizard({
    disableUIStyles: true,
    disableInputFields: false,
    inDuration: 150,
    outDuration: 150
});
</code></pre>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin options</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th>Option</th>
														<th>Default</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>historyEnabled</code></td>
														<td class="text-semibold">false</td>
														<td><code>true</code> enables the BBQ plugin. Enables navigation of the wizard using the browser's back and forward buttons</td>
													</tr>
													<tr>
														<td><code>validationEnabled</code></td>
														<td class="text-semibold">false</td>
														<td><code>true</code> enables the validation plugin</td>
													</tr>
													<tr>
														<td><code>validationOptions</code></td>
														<td class="text-semibold">undefined</td>
														<td>Holds options for the validation plugin. Requires <code>validationEnabled</code></td>
													</tr>
													<tr>
														<td><code>formPluginEnabled</code></td>
														<td class="text-semibold">false</td>
														<td><code>true</code> enables the form plugin. Makes sure that the plugin is posted via AJAX. Set to <code>false</code> if you want to post the form without using AJAX</td>
													</tr>
													<tr>
														<td><code>formOptions</code></td>
														<td class="text-semibold">{ reset: true, success: function(data) { alert("success"); }</td>
														<td>Holds options for the form plugin. See <a href="http://jquery.malsup.com/form/" target="_blank">form plugin documentation</a> for specific options</td>
													</tr>
													<tr>
														<td><code>linkClass</code></td>
														<td class="text-semibold">".link"</td>
														<td>Selector which specifies the CSS-class of inputs used as links in the wizard</td>
													</tr>
													<tr>
														<td><code>submitStepClass</code></td>
														<td class="text-semibold">"submit_step"</td>
														<td>Specifies the CSS-class of the steps where the form should be submitted</td>
													</tr>
													<tr>
														<td><code>back</code></td>
														<td class="text-semibold">":reset"</td>
														<td>Specifies the elements used as back buttons</td>
													</tr>
													<tr>
														<td><code>next</code></td>
														<td class="text-semibold">":submit"</td>
														<td>Specifies the elements used as next buttons</td>
													</tr>
													<tr>
														<td><code>textSubmit</code></td>
														<td class="text-semibold">"Submit"</td>
														<td>The text of the next button on submit steps</td>
													</tr>
													<tr>
														<td><code>textNext</code></td>
														<td class="text-semibold">"Next"</td>
														<td>The text of the next button on non-submit steps</td>
													</tr>
													<tr>
														<td><code>textback</code></td>
														<td class="text-semibold">"Back"</td>
														<td>The text of the back button</td>
													</tr>
													<tr>
														<td><code>remoteAjax</code></td>
														<td class="text-semibold">undefined</td>
														<td>Object holding options for AJAX calls done between steps</td>
													</tr>
													<tr>
														<td><code>inAnimation</code></td>
														<td class="text-semibold">{opacity: 'show'}</td>
														<td>Specifies the animation done during the in-transition between steps</td>
													</tr>
													<tr>
														<td><code>outAnimation</code></td>
														<td class="text-semibold">{opacity: 'hide'}</td>
														<td>Specifies the animation done during the out-transition between steps</td>
													</tr>
													<tr>
														<td><code>inDuration</code></td>
														<td class="text-semibold">400</td>
														<td>Specifies the duration of the in-animation between steps</td>
													</tr>
													<tr>
														<td><code>outDuration</code></td>
														<td class="text-semibold">400</td>
														<td>Specifies the duration of the out-animation between steps</td>
													</tr>
													<tr>
														<td><code>easing</code></td>
														<td class="text-semibold">"swing"</td>
														<td>Specifies the easing used during the transition animations between steps</td>
													</tr>
													<tr>
														<td><code>focusFirstInput</code></td>
														<td class="text-semibold">false</td>
														<td>Specifies whether the first input field on each step should be focused</td>
													</tr>
													<tr>
														<td><code>disableInputFields</code></td>
														<td class="text-semibold">false</td>
														<td>Specifies whether the input fields in the form should be disabled during the initialization of the plugin. The disabling of inputs may be needed to be done in HTML if the number of input fields are very large, if this is needed - set this flag to <code>false</code></td>
													</tr>
													<tr>
														<td><code>disableUIStyles</code></td>
														<td class="text-semibold">false</td>
														<td>Specifies whether the wizard should use jquery UI styles or not</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin events</h6>
										<div class="content-group">
											<p>Example usage:</p>

											<pre><code class="language-javascript">// Event example
$(function() {

	// bind a callback to the before_step_shown event
	$("#demoForm").bind("before_step_shown", function(event, data) {
		alert(data.isBackNavigation);
	});
});
</code></pre>
										</div>

										<p>Available events:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Event</th>
														<th>Returns</th>
														<th style="width: 400px;">Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>after_remote_ajax</code></td>
														<td>
															<code>currentStep</code>: <span class="text-semibold">String</span> (id of the current step)
														</td>
														<td>This event is triggered after a remote ajax call has been done</td>
													</tr>
													<tr>
														<td><code>before_remote_ajax</code></td>
														<td>
															<code>currentStep</code>: <span class="text-semibold">String</span> (id of the current step)
														</td>
														<td>This event is triggered before a remote ajax call is done</td>
													</tr>
													<tr>
														<td><code>before_step_shown</code></td>
														<td>
															<p>The data returned in the data variable is as follows (see the <code>state</code> method for further explanation of the properties):</p>
															<ul class="list">
																<li><code>isBackNavigation</code>: <span class="text-semibold">boolean</span> - <code>true</code> if the wizard navigated back and <code>false</code> otherwise</li>
																<li><code>settings</code>: <span class="text-semibold">Object</span> - the current settings of the wizard (see Options)</li>
																<li><code>activatedSteps</code>: <span class="text-semibold">Array</span> - contains the activated steps of the wizard</li>
																<li><code>isLastStep</code>: <span class="text-semibold">boolean</span> - <code>true</code> if the current step is a submit step</li>
																<li><code>isFirstStep</code>: <span class="text-semibold">boolean</span> - <code>true</code> if the first step is the current step</li>
																<li><code>previousStep</code>: <span class="text-semibold">String</span> - the id of the previous step</li>
																<li><code>currentStep</code>: <span class="text-semibold">String</span> - the id of the current step</li>
																<li><code>backButton</code>: <span class="text-semibold">Selector</span> - contains the <code>backButton</code></li>
																<li><code>nextButton</code>: <span class="text-semibold">Selector</span> - contains the <code>nextButton</code></li>
																<li><code>steps</code>: <span class="text-semibold">Selector</span> - contains the steps of the wizard</li>
																<li><code>firstStep</code>: <span class="text-semibold">String</span> - the id of the first step</li>
															</ul>
														</td>
														<td>This event is triggered just before a step is shown. It is triggered for both backwards and forwards navigation</td>
													</tr>
													<tr>
														<td><code>step_shown</code></td>
														<td>
															<p>The data returned in the data variable is as follows (see the <code>state</code> method for further explanation of the properties):</p>
															<ul class="list">
																<li><code>isBackNavigation</code>: <span class="text-semibold">boolean</span> - <code>true</code> if the wizard navigated back and <code>false</code> otherwise</li>
																<li><code>settings</code>: <span class="text-semibold">Object</span> - the current settings of the wizard (see Options)</li>
																<li><code>activatedSteps</code>: <span class="text-semibold">Array</span> - contains the activated steps of the wizard</li>
																<li><code>isLastStep</code>: <span class="text-semibold">boolean</span> - <code>true</code> if the current step is a submit step</li>
																<li><code>isFirstStep</code>: <span class="text-semibold">boolean</span> - <code>true</code> if the first step is the current step</li>
																<li><code>previousStep</code>: <span class="text-semibold">String</span> - the id of the previous step</li>
																<li><code>currentStep</code>: <span class="text-semibold">String</span> - the id of the current step</li>
																<li><code>backButton</code>: <span class="text-semibold">Selector</span> - contains the <code>backButton</code></li>
																<li><code>nextButton</code>: <span class="text-semibold">Selector</span> - contains the <code>nextButton</code></li>
																<li><code>steps</code>: <span class="text-semibold">Selector</span> - contains the steps of the wizard</li>
																<li><code>firstStep</code>: <span class="text-semibold">String</span> - the id of the first step</li>
															</ul>
														</td>
														<td>This event is triggered when a step is shown. It's triggered for both back and forward navigation</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin methods</h6>
										<div class="content-group">
											<p>Example usage:</p>

											<pre><code class="language-javascript">// Method example
$("#demoForm").formwizard("update_steps");
</code></pre>
										</div>

										<p>Available methods:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Method</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>before_step_shown</code></td>
														<td>This method returns the state of the wizard</td>
													</tr>
													<tr>
														<td><code>show</code></td>
														<td>This method takes care of showing a specified step in the wizard</td>
													</tr>
													<tr>
														<td><code>reset</code></td>
														<td>This method takes care of resetting the wizard</td>
													</tr>
													<tr>
														<td><code>destroy</code></td>
														<td>This method takes care of removing the wizard functionality from the form</td>
													</tr>
													<tr>
														<td><code>back</code></td>
														<td>This method triggers the wizard to move back</td>
													</tr>
													<tr>
														<td><code>next</code></td>
														<td>This method triggers the wizard to move to the next step</td>
													</tr>
													<tr>
														<td><code>update_steps</code></td>
														<td>This method triggers the wizard to check the form for available steps, and cache them</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>form_wizard.min.js, form.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/forms/wizards/form/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<a href="https://github.com/thecodemine/formwizard" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /form wizard -->

						</div>
					</div>
					<!-- /detached content -->



					<!-- Detached sidebar -->
					<div class="sidebar-detached">
			        	<div class="sidebar sidebar-default">
							<div class="sidebar-content">

				        		<!-- Contact author -->
								<div class="sidebar-category no-margin">
									<div class="category-title">
										<span>Page navigation</span>
										<i class="icon-menu7 text-muted pull-right"></i>
									</div>

									<div class="category-content">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading position-left"></i> Contact author</a>
									</div>
								</div>
								<!-- /contact author -->

			        			
			        			<!-- Navigation -->
								<div class="sidebar-category">
									<div class="category-content no-padding">
										<ul class="nav navigation no-padding-top">
											<li class="navigation-header"><i class="icon-history pull-right"></i> Sections</li>
											<li><a href="#stepy">Stepy Wizard</a></li>
											<li><a href="#steps">Steps Wizard</a></li>
											<li><a href="#form">Form Wizard</a></li>
											<li class="navigation-divider"></li>
											<li><a href="#">Go to top <i class="icon-circle-up2 pull-right"></i></a></li>
							            </ul>
						            </div>
					            </div>
					            <!-- /navigation -->

				            </div>
			            </div>
		            </div>
		            <!-- /detached sidebar -->


					<!-- Footer -->
					<div class="footer text-muted">
						&copy; 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</div>
					<!-- /footer -->

				</div>
				<!-- /content area -->

			</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->

</body>
</html>
